<template>
  <!-- 中国地图 -->
  <div ref="map" class="mapChart"></div>
</template>

<script>
export default {
  props: {
    mapData: Array | Object,
    showVisualMap: true, //是否展示地图左面调节的
  },
  data() {
    return {
      // showVisualMap: false,
    };
  },
  created() {},
  mounted() {
    this.drawMap();
  },
  methods: {
    randomData() {
      let Max = 100;
      let Min = 110;
      let Range = Max - Min;
      let Rand = Math.random();
      let num = Min + Math.round(Rand * Range); //四舍五入
      return num;
    },
    drawMap() {
      let that = this;
      let myChart3 = that.$echarts.init(that.$refs.map);
      var mydata = [
        { name: "北京", value: this.randomData() },
        { name: "天津", value: this.randomData() },
        { name: "上海", value: this.randomData() },
        { name: "重庆", value: this.randomData() },
        { name: "河北", value: this.randomData() },
        { name: "河南", value: this.randomData() },
        { name: "云南", value: this.randomData() },
        { name: "辽宁", value: this.randomData() },
        { name: "黑龙江", value: this.randomData() },
        { name: "湖南", value: this.randomData() },
        { name: "安徽", value: this.randomData() },
        { name: "山东", value: this.randomData() },
        { name: "新疆", value: this.randomData() },
        { name: "江苏", value: this.randomData() },
        { name: "浙江", value: this.randomData() },
        { name: "江西", value: this.randomData() },
        { name: "湖北", value: this.randomData() },
        { name: "广西", value: this.randomData() },
        { name: "甘肃", value: this.randomData() },
        { name: "山西", value: this.randomData() },
        { name: "内蒙古", value: this.randomData() },
        { name: "陕西", value: this.randomData() },
        { name: "吉林", value: this.randomData() },
        { name: "福建", value: this.randomData() },
        { name: "贵州", value: this.randomData() },
        { name: "广东", value: this.randomData() },
        { name: "青海", value: this.randomData() },
        { name: "西藏", value: this.randomData() },
        { name: "四川", value: this.randomData() },
        { name: "宁夏", value: this.randomData() },
        { name: "海南", value: this.randomData() },
        { name: "台湾", value: this.randomData() },
        { name: "香港", value: this.randomData() },
        { name: "澳门", value: this.randomData() },
      ];
      let total = 0;
      mydata.forEach((element) => {
        // console.log("value", element.value);
        total += element.value;
        return total;
      });
      // console.log("total", total);
      let option = {
        backgroundColor: "#FFFFFF",
        grid: { x: 0, y: 0, x2: 0, y2: 0 },
        tooltip: {
          trigger: "item",
          // formatter: "{b}&nbsp:&nbsp{c}",
          formatter: function (params) {
            if (params.value) {
              return (
                params.name +
                ":" +
                ((params.value / total) * 100).toFixed(2) +
                "%"
              );
            } else {
              return params.name + ":" + 0;
            }
          },
        },
        visualMap: {
          // show: that.showVisualMap,
          show: false,
          x: "left",
          y: "center",
          min: 100,
          max: 110,
          text: ["高(人数)", "低(人数)"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["#ffefce", "#fd7f2c"],
          },
        },
        //配置属性
        series: [
          {
            name: "数据",
            type: "map",
            mapType: "china",
            roam: true, //鼠标缩放
            label: {
              normal: {
                show: true, //省份名称
              },
              emphasis: {
                show: false,
              },
            },
            data: mydata, //数据
          },
        ],
      };
      myChart3.setOption(option);
      window.addEventListener("resize", function () {
        myChart3.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.mapChart {
  width: 100%;
  height: 100%;
}
</style>